new Vue({
 el:'#searchFilters',
 data:{
   dataArr:[
     {'eName':'anime','props':'title'},
     {'eName':'music','props':['title','singer']},
     {'eName':'game','props':'name'},
     {'eName':'new','props':'title'},
   ],
   areaList:[
     {'title':'番剧','resaultLength':0},
     {'title':'音乐','resaultLength':0},
     {'title':'游戏','resaultLength':0},
     {'title':'资讯','resaultLength':0}
    ],
   animeList:[],
   musicList:[],
   gameList:[],
   newList:[],
   animeListResult:[],
   musicListResult:[],
   gameListResult:[],
   newListResult:[],
   key:'',
   keyValue:'',
   sortDivType:1,
   pageIndex:1,
   pageArr:[],
   area:0,
 },
 methods:{
   readFile(){
    this.key = getQueryString('key');
    this.getData();
   },
   getData(){
    var dataArr =  this.dataArr;
    dataArr.map((item,index)=>{
      this.getDataArea(item.eName,item.props,index);
    })
    
    scrollTo(0,0);
    // 默认区域
    setTimeout(()=>{this.checkArea()},400);
   },
   getDataArea(eName,title,index){
    this.$http.get(`./moongoDB/${eName}s`).then(response =>{
      let res = response.body; 
      if(res){
        window[`${eName}s`] = res.reverse();
        if(typeof(title)=='string'){
          this[`${eName}List`] = window[`${eName}s`].filter(item=>(item[title].indexOf(this.key) != -1));
        }else if(typeof(title)=='object'){
          var jsTem = '';
          title.map((item,index)=>{
            if(index==0) jsTem += ` item['${title[0]}'].indexOf(this.key) != -1 `;
            else jsTem += ` || item['${title[index]}'].indexOf(this.key) != -1 `;
          })
          this[`${eName}List`] = window[`${eName}s`].filter(item=>(eval(jsTem)));
        }
        
        var p = this.pageIndex;
        this.pageArr.length = Math.ceil(this[`${eName}List`].length/6);
        this[`${eName}ListResult`] = this[`${eName}List`].slice(6*(p-1),6*p);
        this.areaList[index].resaultLength = this[`${eName}List`].length;
      }
    },response=>{
      console.log('请求数据失败！');  
    });
   },

   changePageIndex(index){
    this.pageIndex = index + 1;
    this.getDataArea(this.dataArr[this.area-1].eName,this.dataArr[this.area-1].props,this.area-1);
    scrollTo(0,0);
   },
   
   changeArea(index){
    this.area = index + 1;
    this.pageIndex = 1;
    if(this.area==3){
      this.showScore();
    }
   },
   showScore(){
     // 评分渲染
    setTimeout(function(){
      $('.gameList .scoreCotainer').each(function(){
        var score = $(this).attr('data-score');
        if(score<=5){ 
          $(this).find('.ring2').css('transform',`rotateZ(-${180-36*score}deg)`)
        }else{    
          $(this).find('.ring1').css('transform',`rotateZ(-${180-36*(score-5)}deg)`)
        }
      })
    },60)
   },
   checkArea(){
    if(this.animeList.length!=0) 
    this.area = 1;
    else if(this.musicList.length!=0)
    this.area = 2;
    else if(this.gameList.length!=0) 
    {this.area = 3;this.showScore();}
    else if(this.newList.length!=0) 
    this.area = 4; 
    else this.area = 1; 
   },
   toSearch(){
     this.key = this.keyValue;
     this.getData();
   },
   toIndexClick(){
    window.location.href="/";
  },

  toAnimeInfoClick(id){
    window.open(`/animeInfo?id=${id}`,'_blank');
  },
  toMusicInfo(id){
    window.open(`/music?_id=${id}`,'_blank');
  },
  toGameInfoClick(id){
    window.open(`/gameInfo?_id=${id}`,'_blank');
  },
  toNewInfoClick(id){
    window.open(`/newInfo?_id=${id}`,'_blank');
  }
   
 },

 created(){
   this.readFile();
   // 标题
   $('.title').html(`<a>搜索有关 <b>{{key}}</b> 的资源</a>`);
   // 区
   $('.areaMenu').html(`<span v-for="(item,index) in areaList" :class="['menuList',area==index+1?'active':'']" @click="changeArea(index)">{{item.title}} <b>{{item.resaultLength}}</b></span>`);

   // 结果
   $('.result b').html(`{{ animeList.length + musicList.length + gameList.length+ newList.length}}`)
   // 番剧
   $('.animeList').html(`
   <div v-if="sortDivType == 1">
   <div class="animeList_item" v-for="(item,index) in animeListResult" :key="index">
   <div class="left">
    <div class="img" @click="toAnimeInfoClick(item.id)">
        <img :src="item.imgSrc_F" alt="">
    </div>
   </div>
   <div class="right">
      <div class="animeTitle" @click="toAnimeInfoClick(item.id)">{{item.title}}</div>
      <div class="animeArea">地区：{{item.area}}</div>
      <div class="animeTags">类型：
        <div v-for="(arr,index2) in item.tags" :key="index2">{{arr}}</div>
      </div>
      <div class="animeTime">播出时间：{{item.year}}年{{item.month}}月{{item.day}}日</div>
      <div class="animeContent">简介：{{item.content}}</div>
      <div class="animeType">
        <b>状态：</b>
        <div v-if="item.update == 0">已完结，全 <b>{{item.episodes.length}}</b> 话</div>
        <div v-else>更新中，更新至第 <b>{{item.episodes.length}}</b> 话</div>
      </div>
   </div>
   <div class="hot">
      <div>
        <div>热度值</div>
        <div class="value" v-if="item.zValue/(10e7) >= 1">{{parseFloat(item.zValue/(10e7)).toFixed(1)}} 亿</div>
        <div class="value" v-else>{{parseFloat(item.zValue/(10e3)).toFixed(1)}} 万</div>
      </div>
   </div>
</div>
</div>
<div v-else>
  <div class="animeList_item2" v-for="(item,index) in animeList" :key="index">
    <div class="img" @click="toAnimeInfoClick(item.id)">
      <img :src="item.imgSrc_F" />
      <div v-if="item.update == 0" class="imgBottom">全 <b>{{item.episodes.length}}</b> 话</div>
      <div v-else class="imgBottom">更新至第 <b>{{item.episodes.length}}</b> 话</div>
    </div>
    <div class="title">
      <div class="titlehidden" @click="toAnimeInfoClick(item.id)">{{item.title}}</div>
      <div class="animeTags2">
        <div :class="'tags ' + (index2==0?'red ':' ') + (index2==1?'blue':' ') + (index2==2?'green ':' ') + (index2==3?'purple ':' ')" v-for="(arr,index2) in item.tags" :key="index2">{{arr}}</div>
      </div>
    </div>
  </div>
  
</div>`)
// 音乐
$('.musicList').html(`<div class="musicItem" v-for="item in musicListResult">
<div class="imgCotainer" @click="toMusicInfo(item._id)">
  <img :src="item.imgSrc" alt="">
  <span>{{item.time}}</span>
</div>
<div class="content">
  <div class="musicTitle" @click="toMusicInfo(item._id)" :title="item.title +' - '+item.singer">{{item.title}} - {{item.singer}}</div>
  <div class="musicAlbum">
  歌名：{{item.title}}<br>歌手：{{item.singer}}<br>专辑：{{item.album}}
  </div>
</div>
</div>`)
 // 游戏
 $('.gameList').html(`<div class="gameItem" v-for="(item,index) in gameListResult">
 <div class="left" @click="toGameInfoClick(item._id)"><img :src="item.imgUrl" /></div>
 <div class="right">
   <b class="title" @click="toGameInfoClick(item._id)">
   {{item.name}}
   <div style="color:#333; display:inline;padding-left:10px">- {{item.year}}/{{item.month}}/{{item.day}} -</div>
   <div style="color:#6cf; margin:8px 0; height:17px">{{item.eName}}</div>
   </b>
   <div class="content">
     <div>游戏类型：{{item.gameType}}</div>
     <div>游戏产地：{{item.area}}</div>
     <div>游戏状态：{{item.state}}</div>
     <div>游戏官网：<a :href="item.webUrl" target="_blank">链接</a></div>
     <div>开发商：{{item.maker}}</div>
     <div>运营商：{{item.publisher}}</div>
   </div>
   <div class="bottomText">
     <div class="title2">游戏简介</div>
     <div>{{item.content}}</div>
   </div>
   <div class="scoreCotainer" :data-score="item.score">
     <div class="scoreRing">
     <div class="ring1"  style="background-color:rgb(210, 238, 252);transform: rotateZ(0)"  v-if="item.score<=5"></div>
     <div class="ring1" v-else></div>

     <div class="ring2" v-if="item.score<=5"></div>      
     <div class="ring2" style="transform: rotateZ(0)" v-else></div>
       <div class="score">{{item.score}}</div>
     </div>
   </div>
 </div>   
</div>`)
 // 资讯
 $('.newList').html(`<div class="newsItem" v-for="item in newListResult">
 <div class="newsItem_left">
   <div class="imgC" @click="toNewInfoClick(item._id)"><img :src="item.imgSrc" /></div>
 </div>
 <div class="newsItem_right">
   <div class="content">
     <div class="title" :title="item.title" @click="toNewInfoClick(item._id)">{{item.title}}</div>
     <div class="states">
     <span class="time">{{item.time}}</span>
      <span class="readNum">浏览  {{item.readNum}}</span>
     </div>
     <div class="mainContent">{{item.contentText}}</div>
   </div>
 </div>
</div>`)

// 页码
$('.pageDiv').html(`<li :class="pageIndex == index+1? 'active':''" v-for="(item,index) in pageArr" @click="changePageIndex(index)">{{index+1}}</li>`);


 },
 mounted(){   
   
 },
 updated(){
  
 }
 
});